<template>
  <el-header height="56px" class="el-header--primary">
    <!-- 移动端菜单按钮 -->
    <el-button
      v-if="isMobile"
      type="text"
      icon="el-icon-menu"
      @click="toggleMenu"
      class="mr-2"
      circle
    />

    <div class="d-flex align-center">
      <i class="el-icon-document mr-2" style="color:#fff"></i>
      <span class="text-h6">{{ siteName }}</span>
    </div>

    <div class="flex-1"></div>

    <el-badge :value="2" class="item" type="danger">
      <el-button type="text" icon="el-icon-bell" circle />
    </el-badge>

    <el-dropdown>
      <span class="el-dropdown-link">
        <span v-if="userInfo">{{ userInfo.UserName }}</span>
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>修改密码</el-dropdown-item>
        <el-dropdown-item divided @click.native="logoutAct">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </el-header>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  name: 'LayoutHeader',
  data() {
    return {
      isDark: false,
      isMobile: false,
      siteName: '询标系统',
      userInfo: {
        UserName: '管理员'
      }
    }
  },
  computed: {
    ...mapState('menu', ['isCollapsed'])
  },
  methods: {
    ...mapActions('menu', ['toggleCollapse']),
    checkMobile() {
      this.isMobile = window.innerWidth < 960;
    },
    toggleMenu() {
      this.toggleCollapse();
    },
    logoutAct() {
      this.$router.push('/login');
    }
  },
  mounted() {
    this.checkMobile();
    window.addEventListener('resize', this.checkMobile);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.checkMobile);
  }
};
</script>

<style scoped>
.el-header--primary {
  background-color: var(--el-color-primary);
  display: flex;
  align-items: center;
  padding: 0 16px;
  color: #fff;
}
.flex-1 { flex: 1; }
.text-h6 { font-size: 16px; font-weight: 500; }
</style>
